<template>
  <div>
    <a-form :layout="'vertical'" :form="form" @submit="handleSubmit">
      <a-form-item label="接口名称">
        <a-input
          v-decorator="[
            'interfaceName',
            {
              rules: [{ required: true, message: '请输入接口名称' }]
            }
          ]"
          placeholder="请输入接口名称"
        />
      </a-form-item>
      <a-form-item label="接口描述">
        <a-input v-decorator="['description']" placeholder="请输入接口描述" />
      </a-form-item>
      <a-form-item label="接口地址">
        <a-input
          v-decorator="[
            'path',
            {
              rules: [{ required: true, message: '请输入接口地址' }]
            }
          ]"
          style="width: 100%"
          placeholder="接口地址 比如:/api/rest..."
        >
          <a-select
            slot="addonBefore"
            v-decorator="['method', { initialValue: 'GET' }]"
            class="m-0"
            style="width: 100px;border-right:1px #ddd solid"
          >
            <a-select-option value="GET">GET</a-select-option>
            <a-select-option value="POST">POST</a-select-option>
            <a-select-option value="PUT">PUT</a-select-option>
            <a-select-option value="DELETE">DELETE</a-select-option>
          </a-select>
          <a-select
            slot="addonBefore"
            v-decorator="[
              'prefix',
              { initialValue: 'ylh-cloud-service-user-dev' }
            ]"
            class="m-0"
            style="width: 300px"
          >
            <a-select-option value>无前缀</a-select-option>
            <a-select-option value="/ylh-cloud-service-user-dev"
              >ylh-cloud-service-user-dev</a-select-option
            >
            <a-select-option value="/ylh-cloud-service-order-dev"
              >ylh-cloud-service-order-dev</a-select-option
            >
            <a-select-option value="/ylh-cloud-service-fund-dev"
              >ylh-cloud-service-fund-dev</a-select-option
            >
            <a-select-option value="/ylh-cloud-service-price-dev"
              >ylh-cloud-service-price-dev</a-select-option
            >
          </a-select>
        </a-input>
      </a-form-item>
      <a-form-item
        v-bind="{ labelCol: { span: 2 }, wrapperCol: { span: 22 } }"
        class="text-center"
        label="接口入参"
      >
        <a-radio-group v-model="paramType" buttonStyle="solid">
          <a-radio-button :value="3" size="'small'" @click="paramType = 3"
            >Query请求</a-radio-button
          >
          <a-radio-button :value="1" size="'small'" @click="paramType = 1"
            >表单请求</a-radio-button
          >
          <a-radio-button :value="2" size="'small'" @click="paramType = 2"
            >JSON请求</a-radio-button
          >
        </a-radio-group>
      </a-form-item>
      <div>
        <!-- 动态表单 -->
        <div v-if="paramType === 1 || paramType === 3">
          <a-row v-for="k in form.getFieldValue('formOrQueryParam')" :key="k">
            <!-- 字段名称 -->
            <a-col :span="4" class="pl-5 pr-5">
              <a-form-item>
                <a-input
                  v-decorator="[
                    `names.${k}.fieldName`,
                    {
                      validateTrigger: ['change', 'blur'],
                      preserve: true,
                      rules: [
                        {
                          required: true,
                          whitespace: true,
                          message: '必填'
                        }
                      ]
                    }
                  ]"
                  placeholder="字段名称"
                />
              </a-form-item>
            </a-col>
            <!-- 字段类型 -->
            <a-col :span="4" class="pl-5 pr-5">
              <a-form-item>
                <a-input
                  v-decorator="[
                    `names.${k}.fieldType`,
                    {
                      validateTrigger: ['change', 'blur'],
                      preserve: true,
                      rules: [
                        {
                          required: true,
                          whitespace: true,
                          message: '必填'
                        }
                      ]
                    }
                  ]"
                  placeholder="字段类型"
                />
              </a-form-item>
            </a-col>
            <!-- 字段说明 -->
            <a-col :span="6" class="pl-5 pr-5">
              <a-form-item>
                <a-input
                  v-decorator="[
                    `names.${k}.fieldDescription`,
                    {
                      validateTrigger: ['change', 'blur'],
                      preserve: true,
                      rules: [
                        {
                          required: true,
                          whitespace: true,
                          message: '必填'
                        }
                      ]
                    }
                  ]"
                  placeholder="字段说明"
                />
              </a-form-item>
            </a-col>
            <!-- 字段示例 -->
            <a-col :span="6" class="pl-5 pr-5">
              <a-form-item>
                <a-input
                  v-decorator="[
                    `names.${k}.fieldExample`,
                    {
                      validateTrigger: ['change', 'blur'],
                      preserve: true,
                      rules: [
                        {
                          required: false,
                          whitespace: true
                        }
                      ]
                    }
                  ]"
                  placeholder="字段示例"
                />
              </a-form-item>
            </a-col>
            <a-col :span="3" style="line-height:32px;">
              <a-icon
                class="dynamic-delete-button"
                type="minus-circle-o"
                @click="() => remove(k)"
              />
            </a-col>
          </a-row>
          <a-button type="dashed" style="width: 83%;" @click="add">
            <a-icon type="plus" />增加
          </a-button>
        </div>
        <!-- ACE编辑器 -->
        <div
          id="interface-data"
          class="ace-edit-dom"
          v-show="paramType === 2"
        ></div>
      </div>
      <a-form-item
        v-bind="{ labelCol: { span: 2 }, wrapperCol: { span: 22 } }"
        class="text-center mt-50"
        label="接口出参"
      >
        <a-radio-group v-model="isSourceTab" buttonStyle="solid">
          <a-radio-button
            :value="true"
            size="'small'"
            @click="isSourceTab = true"
            >源代码</a-radio-button
          >
          <a-radio-button
            :value="false"
            size="'small'"
            @click="isSourceTab = false"
            >预览</a-radio-button
          >
        </a-radio-group>
      </a-form-item>
      <div>
        <!-- 源代码 -->
        <div
          v-show="isSourceTab"
          class="ace-edit-dom"
          id="interface-source-data"
        ></div>
        <!-- 预览 -->
        <div v-show="!isSourceTab">
          <a-textarea
            placeholder="Basic usage"
            :rows="4"
            read-only
            :value="mockData | formatJSONString"
          />
        </div>
      </div>
      <a-form-item class="mt-20">
        <a-button type="primary" html-type="submit">Submit</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" src="./interface-edit.ts"></script>

<style lang="scss">
@import './interface-edit.scss';

.ace-edit-dom {
  position: relative;
  width: 100%;
  height: 200px;
  border: 1px #ddd solid;
  border-radius: 4px;
}
</style>
